<template>
  <div class="searchs">
      <div class="rank-nav">
        音乐榜
      </div>
      <div class="rank-title">
        <lemon-title>
          <span>排行榜</span>
        </lemon-title>
      </div>
      <div class="rank">
        
        <ul class="rank-ul">
          <li class="rank-li" v-for="(item) in rankplayerList" :key="item.id" >
            <div class="li-img">
              <router-link :to="{name:'RankList',query:{id:item.id}}">
              <img ref="img" class="auto-img" :src="item.coverImgUrl" alt="">
              </router-link>
            </div>
            <div class="li-song">
                <div  v-for="(v,i) in item.tracks" :key="i" v-show="i<3">
                  <span class="song ">{{i+1}}.{{v.name}}-{{v.ar[0].name}}</span>
                </div>
            </div>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
//音乐标题
import LemonTitle from "../components/public/LemonTitle.vue"
//引入顶部标题
//导入请求接口函数
import {getTopList,getPlaylistDetail} from "../api/rank" 
export default {
name: 'Searchs',
components: {
  LemonTitle
},
data() {
  return{
    rankplayerList: [],
  }
},
methods: {
  //排行榜类型传过的参数
  getPlaylistDetailFun(list) {
    // 找到每一个类型的id
    for(let i=0; i<list.length;i++) {
      let id=list[i].id;
      //  获取歌手歌曲信息 需要id 参数
      getPlaylistDetail({id}).then(data=>{
        if(data.code==200) {
          //将歌手信息对象 推入数组
          this.rankplayerList.push(data.playlist);     
      }
      })

    }
          
  },
  
},
created() {

},
//(导航完成前)页面渲染前获取数据
 beforeRouteEnter (to, from, next) {
   //调用获取排行榜类型方法
    getTopList().then( data=> {
      //调用获取排行榜数据方法
      next(vm => vm.getPlaylistDetailFun(data.list))
    })
  },
}
</script>

<style lang="less" scoped>
@import url('../assets/css/base.less');

 
.rank-nav {
  position: sticky;
  top: 0;
  z-index:999;
  text-align: center;
  height:50px;
  line-height:50px;
  font-size:16px;
  color:#fff;
  background-color: @mainColor;
}
.rank-title {
  padding:0 5px;
}
.rank{
  .rank-ul{
    padding:10px 5px;
    margin-bottom: 70px;
    .rank-li {
      min-height:110px;
      display: flex;
      align-items: center;
      border-bottom:1px solid #e6e6e6;

      .li-img{
        width:100px;
        margin-right: 20px;

      }
      .li-song{
        flex:1;
        font-size:14px;
        box-sizing:border-box;
        div{
          text-align: left;
        }
        .song{
          width:100%;
          display:inline-block;
          padding: 5px 0;
        }
      }
    }

  }
}
</style>